<template>
  <div class="identity">
    <p class="headline">请选择您的身份：</p>
    <p class="description">便于为您带来更好的服务</p>
    <ul class="identity-wrapper">
      <li>
        <img src="./../img/1.png">
        <p class="title">我是供应商</p>
        <p class="text">精准匹配买家，促进订单完成</p>
        <button @click="toPage('seller')" themeBorder-2 opacity>GO</button>
      </li>
      <li>
        <img src="./../img/2.png">
        <p class="title">我是采购商</p>
        <p class="text">海量商品在线寻，采购轻松无障碍</p>
        <button @click="toPage('buyer')" themeBorder-2 opacity>GO</button>
      </li>
      <li>
        <img src="./../img/3.png">
        <p class="title">我是服务商</p>
        <p class="text">客户来源不担心，服务便捷更高效</p>
        <button @click="toPage('')" themeBorder-2 opacity>GO</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Identify',
  methods: {
    toPage (path) {
      this.$router.push('/' + path)
    }
  }
}
</script>

<style lang="scss" scoped>
.identity {
  box-sizing: border-box;
  padding-top: 1.6rem;
  .headline {
    text-align: center;
    font-size: .64rem;
    line-height: 1em;
  }
  .description {
    text-align: center;
    color: #666;
    line-height: 1em;
    margin-top: .32rem;
  }
  .identity-wrapper {
    width: 22.4rem;
    margin: 1.26rem auto;
    display: flex;
    justify-content: space-between;
    li {
      width: 7.2rem;
      height: 6.8rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      box-shadow: 0px 3px 15px #eee;
      transition: all .3s;
      box-sizing: border-box;
      padding-top: .6rem;
      overflow: hidden;
      &:hover {
        box-shadow: 0px 9px 35px #e3e3e3;
        img {
          margin-top: -5rem;
          margin-bottom: 3.5rem;
        }
        button {
          margin-top: 1rem;
        }
      }
      img {
        margin-bottom: .5rem;
        width: 2.5rem;
        transition: all .3s;
      }
      .title {
        font-size: .48rem;
      }
      .text {
        font-size: .32rem;
        margin-top: .4rem;
      }
      button {
        flex: none;
        margin-top: 2rem;
        width: 3.6rem;
        height: .88rem;
      }
    }
  }
}
</style>